<template>
    <div class="btn">
        <div class="continue" v-if="!loading">
            <slot></slot>
        </div>
        <Loading v-if="loading"></Loading>
    </div>

</template>

<script setup lang="ts">
import {computed} from 'vue'
import Loading from "@/components/loading.vue";

// console.log()
const Props = defineProps<{
  loading: boolean,
  disabled?: boolean
}>()
let eventNone = computed(() => Props.disabled ? 'none' : '')
</script>

<style scoped lang="scss">
.btn {
  position: relative;
  background: #10a37f;
  min-height: 52px;
  line-height: 52px;
  color: #fff;
  border-radius: 4px;
  transition: box-shadow .25s;
  pointer-events: v-bind(eventNone);
}

.continue {
  cursor: pointer;
  &:hover {
    //background: rgba(26,127,100);
    box-shadow: inset 0 0 0 150px rgba(0, 0, 0, .1);
  }
}
</style>